<template>
  <div class="videoBox">
    <div>
      <div>
        <el-form :inline="true" :model="searchVideoParams" class="anim" v-show="formShow">
          <el-form-item label="番剧名">
            <el-input v-model="searchVideoParams.name" placeholder="番剧名" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="观看状态">
            <el-checkbox-group v-model="searchVideoParams.progressArray" size="mini">
              <el-checkbox-button :label="0">未看</el-checkbox-button>
              <el-checkbox-button :label="1">在看</el-checkbox-button>
              <el-checkbox-button :label="2">已看</el-checkbox-button>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="标签">
            <el-select collapse-tags
                       v-model="searchVideoParams.label"
                       multiple placeholder="请选择"
                       size="mini">
              <el-option v-for="item in labels"
                         :key="item"
                         :label="item"
                         :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchVideo" size="mini">查询</el-button>
          </el-form-item>
        </el-form>
        <div>
          <el-button icon="el-icon-search" circle size="mini" @click="formShow=!formShow"></el-button>
        </div>
      </div>
      <div>
        <el-card v-for="item in serachVideoArray" :key="item.id" shadow="hover" :class="getCardClass(item.progress)">
          <div class="h-card-div" @click="playVideo(item.id)">
            <img :src="item.headImg?getHeadImg(item.headImg):require('@/assets/images/noImage.png')" width="110px"
                 alt="">
            <div class="bottom clearfix">
              <span>{{ item.name }}</span>
            </div>
          </div>
        </el-card>
        <pagination
          v-show="searchVideoTotal>0"
          :total="searchVideoTotal"
          :page.sync="searchVideoParams.pageNum"
          :limit.sync="searchVideoParams.pageSize"
          @pagination="searchVideo"/>
      </div>
    </div>
    <div class="historyBox">
      <div>历史观看</div>
      <div>
        <el-card v-for="item in historyVideoList" :key="item.id" shadow="hover" :class="getCardClass(item.progress)">
          <div class="h-card-div" @click="playVideo(item.id)">
            <img :src="item.headImg?getHeadImg(item.headImg):require('@/assets/images/noImage.png')" width="110px"
                 alt="">
            <div class="bottom clearfix">
              <span>{{ item.name }}</span>
            </div>
          </div>
        </el-card>
        <pagination
          v-show="historyTotal>0"
          :total="historyTotal"
          :page.sync="historyQueryParams.pageNum"
          :limit.sync="historyQueryParams.pageSize"
          @pagination="getHistoryVideo"/>
      </div>
    </div>
    <div>
      <div>最新添加</div>
      <div>
        <el-card v-for="item in newVideoList" :key="item.id" shadow="hover" :class="getCardClass(item.progress)">
          <div class="h-card-div" @click="playVideo(item.id)">
            <img :src="item.headImg?getHeadImg(item.headImg):require('@/assets/images/noImage.png')" width="110px"
                 alt="">
            <div class="bottom clearfix">
              <span>{{ item.name }}</span>
            </div>
          </div>
        </el-card>
        <pagination
          v-show="newVideoTotal>0"
          :total="newVideoTotal"
          :page.sync="newVideoQueryParams.pageNum"
          :limit.sync="newVideoQueryParams.pageSize"
          @pagination="getVideo"/>
      </div>
    </div>
  </div>
</template>

<script>
import { getHistoryVideoList, listVideo } from '@/api/video/video'
import { Message } from 'element-ui'

export default {
  name: 'Index',
  data() {
    return {
      historyQueryParams: {
        pageNum: 1,
        pageSize: 10,
        orderByColumn: 'insert_time',
        isAsc: 'desc'
      },
      newVideoQueryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        headImg: null,
        profiles: null,
        orderByColumn: 'createTime',
        isAsc: 'desc'
      },
      searchVideoParams: {
        pageNum: 1,
        pageSize: 10,
        name: '',
        progressArray: [],
        label: [],
        orderByColumn: 'createTime',
        isAsc: 'desc'
      },
      historyTotal: 0,
      newVideoTotal: 0,
      searchVideoTotal: 0,
      historyVideoList: [],
      newVideoList: [],
      serachVideoArray: [],
      labels: ['后宫', '异世界', '恋爱', '校园'],
      formShow: false
    }
  },
  created() {
    this.getHistoryVideo()
    this.getVideo()
  },
  methods: {
    getHeadImg(src) {
      return src ? (process.env.VUE_APP_BASE_API + src) : ''
    },
    getCardClass(p) {
      switch (p) {
        case 1:
          return 'h-card h-border-success'
        case 2:
          return 'h-card h-border-info'
        default :
          return 'h-card'
      }
    },
    getHistoryVideo() {
      getHistoryVideoList(this.historyQueryParams).then(res => {
        if (res.code === 200) {
          this.historyVideoList = res.rows
          this.historyTotal = res.total
        }
      })
    },
    getVideo() {
      listVideo(this.newVideoQueryParams).then(res => {
        if (res.code === 200) {
          this.newVideoList = res.rows
          this.newVideoTotal = res.total
        }
      })
    },
    searchVideo() {
      listVideo(this.searchVideoParams).then(res => {
        if (res.code === 200) {
          this.serachVideoArray = res.rows
          this.searchVideoTotal = res.total
        } else {
          Message.error('搜索失败')
        }
      })
    },
    playVideo(id) {
      window.open('/videoPlayer/' + id)
    }
  }
}
</script>

<style scoped lang="scss">
.videoBox > div {
  margin: 20px;
}

.historyBox {
}

.videoBox > div:first-child > div:first-child {
  height: 50px;
  background: #FFFFFF;
  display: flex;
}

.anim {
  transition: ease-in-out .3s;
}

.h-border-success {
  border: solid 1px #67C23A;
}

.h-border-info {
  border: solid 1px #91949A;
}

.videoBox > div > div:first-child {
  margin-bottom: 20px;
  background: #F4F4F4;
  line-height: 30px;
  height: 30px;
}

.h-card {
  width: 150px;
  margin-right: 20px;
  display: inline-block;
  cursor: pointer;
}


.h-card-div {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>

